<!--
 * @Author: GL
 * @Date: 2022-09-23 14:21:18
 * @LastEditors: GL
 * @LastEditTime: 2023-04-05 14:45:14
 * @Description: 商品管理
-->
<template>
  <div class="user">
    <el-input v-model="proName" class="input" placeholder="请输入商品名称"/>
    <el-button class="btn" type="info" @click="search">搜索</el-button>
    <div class="line"></div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="product_name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="cate" label="类别" width="150">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="150">
      </el-table-column>
      <el-table-column prop="product_spec" label="规格" width="150">
      </el-table-column>
      <el-table-column prop="img" label="商品图" width="150">
        <template #default="scope">
          <el-image style="width: 60px; height: 60px;border-radius: 10px;" :src="scope.row.img" :zoom-rate="1.2"
           :initial-index="4" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="is_delete" label="状态" width="150">
        <template #default="scope">
          <span :style="scope.row.is_delete == 0 ? 'color:green' : 'color:red'">
            {{ scope.row.is_delete == 0 ? '在线' : '下架' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="发布人" width="150" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-dialog v-model="centerDialogVisible" title="商品详情" width="60%" align-center>
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              商品名称
            </div>
          </template>
          {{ pInfo.product_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              类别
            </div>
          </template>
          {{ pInfo.cate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              价格
            </div>
          </template>
          {{ pInfo.price }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">状态</div>
          </template>
          <el-tag size="small">{{ pInfo.is_delete == 0 ? '在线' : '下架' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">规格 </div>
          </template>
          {{ pInfo.product_spec }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">发布人 </div>
          </template>
          {{ pInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">商品图 </div>
          </template>
          <el-image style="width: 100px; height: 100px;border-radius: 10px;" :src="pInfo.img" :zoom-rate="1.2"
             :initial-index="4" fit="cover" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">描述 </div>
          </template>
          {{ pInfo.descript }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">Cancel</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsList, cancelGoods,searchProduct,updateUser } from "../../network/user";
export default {
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      pInfo: {},
      proName:undefined
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取信息
    getList() {
      getGoodsList().then(res => {
        console.log(res);
        this.tableData = res.data
      })
    },
    // 商品搜索
    search() {
      searchProduct({
        name:this.proName
      }).then(res => {
        this.tableData = res.data
      })
    },
    handleEdit(index, row) {
      this.pInfo = row;
      this.centerDialogVisible = true;
    },
    // 商品下架
    handleDelete(index, row) {
      console.log(row.product_id);
      this.$confirm('确认要强制下架该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelGoods(row.product_id).then(res => {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    cancel() {
      this.centerDialogVisible = false;
      this.pInfo = {};
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  .input {
    width: 300px;
    margin: 25px 10px 40px;
  }

  .btn {
    margin: 25px 10px 40px;
  }

  .line {
    border-bottom: 1px solid #888888;
    margin-bottom: 10px;
  }
}
</style>